<template>
  <div class="login-main df aic jcc">
    <div v-show="regLogin" class="bb1 df fdc aic jcc p10">
      <el-form :model="loginForm">
        <el-form-item class="w100">
          <div class="df aic">
            <img
              style="width: 80px; height: 80px; margin-right: 40px"
              src="@/assets/bg/logoLogin.png"
              alt=""
            />
            <p style="color: #5ED6B5" class="title w100">欢迎登录</p>
          </div>
        </el-form-item>
        <el-form-item style="height: 45px" class="w100">
          <el-input
            style="height: 45px"
            v-model="loginForm.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item style="height: 45px" class="w100">
          <el-input
            style="height: 45px"
            type="password"
            show-password
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item style="height: 45px" class="w100 df fdc">
          <el-button
            style="height: 45px;background-color: #5ED6B5;"
            class="w100 login-btn"
            @click="userLogin"
            >登录</el-button
          >
          <p style="color: #000">
            还没有账号？<span
              @click="toReg"
              style="color: rgb(51.2, 126.4, 204); cursor: pointer"
              >立即注册</span
            >
          </p>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="!regLogin" class="bb1 df fdc aic jcc p10">
    
      <el-form :v-model="registerForm">
        <el-form-item class="w100">
            <div class="df aic">
        <img
          style="width: 80px; height: 80px; margin-right: 40px"
          src="@/assets/bg/logoLogin.png"
          alt=""
        />
        <p style="color: #5ED6B5;" class="title w100">用户注册</p>
      </div>
        </el-form-item>
        <el-form-item style="height: 45px" class="w100">
          <el-input
            style="height: 45px"
            v-model="registerForm.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item style="height: 45px" class="w100">
          <div class="df aic jcsb w100">
            <el-input
              style="height: 45px; margin-right: 20px"
              type="text"
              v-model="registerForm.auth_code"
              placeholder="请输入验证码"
            ></el-input>
            <el-button
              :disabled="true"
              @click="getAuthCode"
              v-show="regetBol"
              style="height: 45px"
              >获取验证码</el-button
            >
            <el-button
              :loading="getAuthCodeLoading"
              @click="regetAuthCode"
              v-show="!regetBol"
              >{{ reget + retime }}</el-button
            >
          </div>
        </el-form-item>
        <el-form-item class="w100">
          <el-input
            style="height: 45px"
            type="password"
            show-password
            v-model="registerForm.pwd"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="w100">
          <el-input
            style="height: 45px"
            type="text"
            v-model="registerForm.nickname"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item style="height: 45px" class="w100 df fdc">
          <el-button
            style="height: 45px;background-color: #5ED6B5;"
            class="w100 login-btn"
            @click="userRegistry"
            >注册</el-button
          >
          <p style="color: #000">
            已有账号？<span
              @click="toLogin"
              style="color: rgb(51.2, 126.4, 204); cursor: pointer"
              >返回登录</span
            >
          </p>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { login, register } from "@/apis/user";
import { ElMessage } from "element-plus";
import router from "@/router";

// 登录表单
const loginForm = ref({
  phone: "",
  password: "",
});
// 注册表单
const registerForm = ref({
  phone: "",
  auth_code: "888888",
  pwd: "",
  nickname: "",
});
// 登录或者注册   true为登录false为注册
const regLogin = ref(true);
const regetBol = ref(true);
const reget = ref("重新获取");
const retime = ref(60);
const getAuthCodeLoading = ref(false);

// 用户登录
const userLogin = async () => {
  let data = {};
  if (!loginForm.value.phone) {
    ElMessage.error("请输入手机号！");
    return;
  }
  if (!loginForm.value.password) {
    ElMessage.error("请输入密码！");
    return;
  }
  data.phone = loginForm.value.phone;
  data.passwd = loginForm.value.password;
  try {
    let loginRes = await login(data);

    if (loginRes.data.code === 200) {
      localStorage.setItem(
        "token",
        JSON.stringify(loginRes.data.data.access_token)
      );
      router.push("/home");
    }
  } catch (e) {
    ElMessage.error("错误，请检查输入或稍后再试");
  }
};

const authCodeFn = async () => {
  let data = {};
  data.phone = registerForm.value.phone;
  data.auth_code = registerForm.value.auth_code;
  data.passwd = registerForm.value.pwd
  data.nickname = registerForm.value.nickname
  try {
    let res = await register(data);
    if (res.data.code == 200) {
        regLogin.value = true;
      registerForm.value.phone = "";
      registerForm.value.auth_code = "";
      registerForm.value.pwd = "";
      registerForm.value.nickname = "";
      ElMessage.success('注册成功')
    }
  } catch (e) {
    ElMessage.error("错误，请检查输入或稍后再试");
  }
};
// 开启注册关闭登录
const toReg = () => {
  regLogin.value = false;
};

// 返回登录
const toLogin = () => {
  regLogin.value = true;
};
const getAuthCode = () => {
  getAuthCodeLoading.value = true;
  regetBol.value = false;
  let timer = setInterval(() => {
    --retime.value;
  }, 1000);

  // authCodeFn()
};
const regetAuthCode = () => {
  retime.value = 60;
  getAuthCode();
};
const userRegistry = () => {
  if (!registerForm.value.phone) {
    ElMessage.error("请填写手机号");
    return;
  }
  if (!registerForm.value.auth_code) {
    ElMessage.error("请填写验证码");
    return;
  }
  if (!registerForm.value.pwd) {
    ElMessage.error("请填写密码");
    return;
  }
  if (!registerForm.value.nickname) {
    ElMessage.error("请填写昵称");
    return;
  }
  authCodeFn();
};
watch(
  () => retime.value,
  (newVal) => {
    if (newVal < 1) {
      getAuthCodeLoading.value = false;
      closeInterval(timer);
    }
  }
);
</script>

<style lang="scss" scoped>
// 深色背景动画
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.login-main {
  width: 100%;
  height: 100%;
  // background: linear-gradient(-45deg, #231f6e, #20bdfe, #2600b4, #1d1a44);;
  // animation: gradientBG 15s ease infinite;
  background-color: #fff;
  background-size: 400% 400%;
  overflow: hidden;
}
.bb1 {
  // border: 1px solid rgba(255,255,255,.5);
  padding: 80px;
  box-shadow: 0 0 10px #ccc;
  // background: url(../../assets/bg/image.png) no-repeat;
  // background-size: 100% 100%;
  margin: 0 auto;
  overflow: hidden;
  z-index: 999999;
}

.el-form {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
}
.title {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.login-btn {
  // background-color: #3fb5e3;
  color: #fff;
  font-weight: 600;
  outline: none;
}
// .login-btn:hover{
//   background-color: #fff;
//   color: #5ED6B5;
  
// }
// :deep(.el-input__wrapper){
//     // background: rgba(11, 116, 180, 0.8);
//     // color: #fff;
// }
// :deep(.el-input__inner){
//     // color: #fff;
// }
</style>
